<!-- 首页 -->
<template>
	<view class="page">
		<view class="home" @click="home">个人中心</view>
		<view class="user-box">
			<u-avatar :src="user.avatar" :size="110"></u-avatar>
		</view>
		<view class="room-box">
			<view class="header">
				<image src="../../static/titbg.png"></image>
				<view class="title">你可以问我任何问题</view>
			</view>
			<scroll-view class="scroll-view" scroll-y scroll-with-animation @scrolltolower="onreachBottom">
				<!-- <view class="chat-box">
					<view class="message friend">
						<view class="avatar-box" @click="showUser">
							<u-avatar class="avatar" :size="90"></u-avatar>
							<view class="nickname">查看匿名者</view>
						</view>
						<view class="content-box">
							<view class="content-span">
								<view class="content">如果我追你，成功率多少</view>
								<view class="close-btn" @click="del">
									<u-icon name="guanbi1" size="24" custom-prefix="iconfont"></u-icon>
								</view>
							</view>
							<view class="reply-span">
								<view class="reply-btn" @click="reply">回复</view>
							</view>
						</view>
					</view>
					<view class="message friend">
						<view class="avatar-box">
							<u-avatar class="avatar" :size="90"></u-avatar>
						</view>
						<view class="content-box">
							<view class="content-span">
								<view class="content">如果我追你，成功率多少</view>
							</view>
							<view class="reply-span">
								<view class="reply-text">已回复</view>
							</view>
						</view>
					</view>
					<view class="message friend">
						<view class="avatar-box" @click="showUser">
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="content-box">
							<view class="content-span">
								<view class="content">如果我追你，成功率多少</view>
							</view>
							<view class="reply-span"></view>
						</view>
					</view>
					<view class="message self">
						<view class="content">你好</view>
						<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
					</view>
					
				</view>
				 -->
				<view class="chat-box">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="message friend">
							<user-avatar :item="item" @preAd="preAd" @ok="openUser"></user-avatar>
							<view class="content-box">
								<view class="content-span">
									<view class="content">{{item.message}}</view>
									<view class="close-btn" @click="del(item)">
										<u-icon name="guanbi1" size="24" custom-prefix="iconfont"></u-icon>
									</view>
								</view>
								<view class="reply-span">
									<view class="reply-btn" @click="reply(item)">回复</view>
								</view>
							</view>
						</view>
						
						<block v-for="(other, index2) in item.replyList" :key="index2">
							<view class="message self">
								<view class="content">{{other.message}}</view>
								<u-avatar :src="other.avatar" class="avatar" :size="90"></u-avatar>
							</view> 
						</block>
					</block>
					<view v-if="dataList.length == 0" class="msgeno_box">
						邀请好友提问领趣豆<br>点击分享朋友圈👇👇
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="dataList.length == 0 || shareFlag == true" class="share-box">
			<u-button @click="pointFlag = true" type="primary">分享朋友圈</u-button> 
		</view>
		<view v-else>
			<view class="btn-box"> 
				<view class="btn all" @click="qsk">解密全部</view>
				<view class="btn play" @click="shareFlag = true">再玩一次</view>
			</view>
			<view class="tip">注意：严禁涉黄暴涉症内容，坚决反对诽谤、辱骂、骚扰他人</view>
		</view>
		
		<u-mask :show="show" @click="show = false">
			<view class="send-mask">
				<view class="rect" @tap.stop>
					<view class="msg-box">
						<view class="textarea">
							<textarea v-model="question" maxlength="200" placeholder="请真诚回答朋友的问题"></textarea>
						</view>
					</view>
					<view class="send-btn" @click="sendRp">发送</view>
				</view>
			</view>
		</u-mask>
		
		<u-modal @confirm="confirmAd" :show-cancel-button="false" confirm-text="好哒" confirm-color="#5aaeb0" mask-close-able v-model="show2">
			<view class="pay-mask">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		
		<u-modal :show-cancel-button="false" confirm-text="好哒" confirm-color="#5aaeb0" mask-close-able v-model="show3">
			<view class="pay-mask">
				<rich-text :nodes="content2"></rich-text>
			</view>
		</u-modal>
		 
		<point-share @close="pointFlag = false" :show="pointFlag"></point-share>
		<coin-popup></coin-popup>
		<user-auth :isJump="false"></user-auth>
	</view> 
</template>

<script>
import pointShare from '@/components/point-share/index';
import userAvatar from '@/components/user-avatar/user-avatar';
export default {
	components: { 
		pointShare,
		userAvatar,
	},
	props:{
		
	},
	data() {
		return {
			userId: 0,
			user: {},
			show: false,
			show2: false,
			show3: false,
			placeholderStyle: {
				fontSize: '24rpx',
			}, 
			question: '',
			content: '看一次广告查看该条匿名者<br>看看是谁在偷偷向你提问',
			content2: '支付5.2元查看全部匿名者<br>看看是谁在偷偷向你提问',
			current: 1,
			pageSize: 10,
			isEnd: false,
			dataList: [],
			shareFlag: false,
			pointFlag: false,
		};
	},
	onShareAppMessage(res) {
		return {
			title: '坦白局大挑战，给我说句悄悄话',
			path: '/pages/question/index?my=true&shareUserId='+this.userId,
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		};
	},
	onShareTimeline(res) {
		return {
			title: '坦白局大挑战，给我说句悄悄话',
			query: 'share=true&shareUserId='+this.userId,
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		}; 
	},
	onLoad(option) {
		this.userId = uni.getStorageSync("userId");
		let pages = getCurrentPages();//页面列表
		let page = pages[pages.length-1].$page.fullPath;//路由名称
		var share = page.split('share=')[1];//split切割获得想要的字段 
		var shareUserId = page.split('shareUserId=')[1];
		if(share){ 
			uni.reLaunch({
			  url: '/pages/question/index?my=true&shareUserId='+shareUserId,
			});
			return;
		}
		this.query();
	},
	methods: {
		load() {
			this.loadmore(); 
		},
		async loadmore() {
			if(this.isEnd){
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.rows);
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.loadquery();
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
		},
		async getDataList() {
			var data = await this.$u.get('/wq/question/myList', {
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var res = data.page;
			this.user = data.user;
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			if(this.current > this.pages){
				this.isEnd = true;
			}
			return res;
		},
		del(e) {
			this.questionId = e.id;
			var _this = this;
			uni.showModal({
				title: '提示',
				content: '此条提问将被永久删除，确定删除吗？',
				showCancel: true,
				success: function(res) {
					if(res.confirm){
						_this.delQuestion();
					}
				},
			});
		},
		reply(e) {
			this.questionId = e.id;
			this.show = true;
		},
		delQuestion() { 
			this.$u.post('/wq/question/remove',{
				id: this.questionId,
			}).then(res => {
				this.query();
			});
		},
		showUser(e) {
			if(e.checkStatus == '0'){
				this.show2 = true;
			}else{
				this.userCenter(e);
			}
		},
		qsk() {
			//this.show3 = true;
			this.$u.post('/wq/question/openAllUser').then(res => {
				this.query();
			});
		},
		qskTab(e) {
			this.question = e;
		},
		sendReply() {
			if(!this.question){
				this.$u.toast('请输入内容');
				return;
			}
			this.$u.post('/wq/questionReply/add',{
				questionId: this.questionId,
				message: this.question,
			}).then(res => {
				this.show = false;
				this.question = '';
				this.query();
			});
		},
		sendRp() {
			var _this = this;
			_this.$u.get('/system/user/getTmplId',{
				appId : _this.website.appId
			}).then(res => {
				var tmplIds = res.tmplIds
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									_this.sendReply();
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									_this.sendReply();
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
				
			})
		},
		onreachBottom(e) {
			this.load();
			console.log('到底了');
		},
		preAd(run) {
			var _this = this;
			
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					var code = loginRes.code;
					_this.$u.get('/system/config/getAdValue',{
						code: code,
						appId: _this.website.appId
					}).then(res => {
						uni.login({
							provider: 'weixin',
							success: function(e) {
								_this.openImg(e.code, res.data, res.adId, run);
							},
							fail: function() {
								
							}
						});
					});
				},
				fail: function() {
					
				}
			});
		},
		openImg(code,config,adId,run) {
			var adNum = uni.getStorageSync("adNum");
			if(adNum > 0){
				adNum = adNum - 1;
				uni.setStorageSync("adNum", adNum);
				run(true);
				return;
			}
			
			var adFlag = false;
			var content = "观看广告并点击广告下方绿色按钮后再返回，即可解锁资源";
			if("0" == config){
				run(true);
				return;
			}else if("1" == config){
				// 需要点击广告
				adFlag = false;
			}else if("2" == config){
				// 不需要点击广告
				adFlag = true;
				content = "观看广告后，即可解锁资源";
			}else if("3" == config){
				// 需要转发好友
				content = "今日观看广告次数已用完，请转发好友或者群聊，即可解锁5次资源";
			}
			
			var _this = this;
			uni.showModal({
			  title: '提示',
			  content: content,
			  success: (res) => {
			    if (res.confirm) {
					if("3" == config){
						uni.setStorageSync("adClick", false);
						uni.$off('test');
						uni.$on('test', function(res){
							if(res){
								uni.setStorageSync("adNum", 4);
								_this.$store.commit('setCash', false);
								_this.addAdLog(code, "03");
								uni.$off('test');
								run(true);
							}else{
								uni.showModal({
								  title: '您没有转发成功',
								  content: '您没有转发成功，请重新来过',
								  showCancel: false,
								  success: (res) => {
									  run(false);
								  }
								});
							}
						});
						_this.$store.commit('setCash', true);
						return;
					}
					//加载激励广告
					_this.$utils.videoAdInit(adId);
					// 在适合的场景显示插屏广告
					_this.$utils.videoAdShow()
					.then((res) => {
					  if (res) {
						var adClik = uni.getStorageSync("adClick");
						console.log("点击广告"+adClik);
						if(adClik || adFlag){
							if(adClik){
								_this.addAdLog(code, "02");
							}else{
								_this.addAdLog(code, "01");
							}
							run(true);
						}else{
							_this.addAdLog(code, "01");
							uni.showModal({
							  title: '您没有点击绿色按钮',
							  content: '您没有点击绿色按钮，请重新来过',
							  success: (res) => {
								  run(false);
							  }
							});
						}
					  } else {
						console.log('广告提前退出')
						_this.addAdLog(code, "00");
						run(false);
					  }
					})
					.catch((err) => {
						console.log('广告加载失败')
						run(false);
					});  
			    }
			  }
			});
		},
		addAdLog(code, action) {
			this.$u.post('/wq/ad/add',{
				adAction: action,
				appId: this.website.appId,
				code: code,
			}).then(res => {
				
			});
		},
		openUser(e) {
			this.$u.post('/wq/question/openUser',{
				id: e.id,
			}).then(res => {
				this.query();
			});
		},
		userCenter(e) {
			this.$u.route({
				url: 'packgeMine/pages/center/index',
				params: {
					userId: e.sendUserId,
				}
			});
		},
		home() {
			uni.reLaunch({
			  url: '/pages/index'
			});
		},
	}
}; 
</script>

<style lang="scss" scoped>
	.page {
		padding: 15px;
		background-color: #5ac9c0;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		padding-top: 0;
	}
	.home {
		background-color: #ddd;
		position: absolute;
		right: 0;
		top: 50px;
		font-size: 22rpx;
		padding: 8px 15px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		padding-right: 10px;
		color: #3b9fa1;
	}
	.user-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15px;
		padding: 20px 0;
		
		.avatar {
			border-radius: 100%;
			width: 118rpx;
			height: 118rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ddd;
		}
	}
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 248px);
		/* #endif */
		/* #ifndef H5 */
		height: calc(100vh - 198px);
		/* #endif */
		box-sizing: border-box;
		background-color: #d3f0eb;
		border-radius: 6px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.room-box {
		position: relative;
		display: flex;
		justify-content: center;
		
		.header {
			position: absolute;
			top: -17px;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image {
				height: 40px;
				width: 260px;
			}
			
			.title {
				position: absolute;
				font-size: 20px;
				color: #fff;
			}
		}
		.chat-box {
			background-color: #d3f0eb;
			padding: 10px;
			padding-left: 5px;
			padding-top: 35px;
			border-radius: 6px;
			
			.msgeno_box {
				position: absolute;
				top: 50%;
				left: 10%;
				right: 10%;
				text-align: center;
				font-size: 18px;
				color: #3b9fa1;
				line-height: 30px;
				margin-top: -30px;
			}
		}
	}
	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		
		.avatar-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 140rpx;
		}
		.avatar {
			//margin-right: 30rpx;
		}
		.nickname {
			margin-top: 5px;
			font-size: 22rpx;
			color: #5aaeb0;
		}
		.ellipsis {
			max-width: 110rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.content-span {
			position: relative;
			flex: 1;
			max-width: 400rpx;
			
			.close-btn {
				position: absolute;
				top: -6px;
				right: -6px;
				background-color: #ffffff9c;
				border-radius: 100%;
				font-size: -29px;
				padding: 5px;
				width: 30rpx;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.content-box {
			display: flex;
			align-items: center;
			flex: 1;
			
			.reply-span {
				margin-left: 10px;
				width: 90rpx;
				font-size: 24rpx;
				color: #909399;
				
				.reply-btn {
					background-color: #5aaeb0;
					color: #fff;
					font-size: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 5px 0;
					border-radius: 5px;
				}
			}
		}
		.content {
			min-height: 80rpx;
			max-width: 400rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			image {
				width: 200rpx;
			}
		}
		&.self {
			justify-content: flex-end;
			.avatar {
				margin: 0 0 0 30rpx;
			}
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}
		&.friend {
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}
	
	.btn-box {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		
		.btn {
			background-color: #686898;
			height: 35px;
			color: #fff;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.all {
			background-color: #fee0a5;
			color: #ed6c3d;
		}
		
		.play {
			color: #3b9fa1;
			background-color: #def1ed;
		}
	}
	
	.share-box {
		padding: 10px 85px;
		padding-top: 25px;
	}
	
	.yq {
		animation: btnScaleAni 3.5s infinite;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: 1; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: 1; }
	}
	
	.tip {
		font-size: 22rpx;
		color: red;
		display: flex;
		justify-content: center;
	}
	
	
	.send-mask {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0 40px;
		
		.rect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
		
		.msg-box {
			background-color: #fff;
			border-radius: 3px;
			width: 100%;
			margin-bottom: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 15px 10px;
			
			.textarea {
				width: 100%;
				overflow: hidden;
			}
			
			.textarea textarea {
				width: 100%;
				font-size: 14px;
				border: 1px #eee dashed;
				box-sizing: border-box;
				float: left;
				color: #333;
				line-height: 1.6;
				height: 110px;
				padding: 5px 10px;
			}
		}
		
		.send-btn {
			height: 35px;
			width: 100px;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fee0a5;
			color: #ed6c3d;
		}
	}
	
	.qsk-mask {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0 40px;
		margin-top: 10px;
		
		.rect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
		
		.msg-box {
			background-color: #fff;
			border-radius: 3px;
			width: 100%;
			margin-bottom: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 15px 10px;
			
			.textarea {
				width: 100%;
				overflow: hidden;
			}
			
			.textarea textarea {
				width: 100%;
				font-size: 14px;
				border: 1px #eee dashed;
				box-sizing: border-box;
				float: left;
				color: #333;
				line-height: 1.6;
				height: 110px;
				padding: 5px 10px;
			}
			
			.scroll-qsk {
				height: 210px;
				
				.qsk {
					font-size: 24rpx;
					padding-top: 10px;
				}
			}
		}
		
		.send-btn {
			height: 35px;
			width: 100px;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fee0a5;
			color: #ed6c3d;
		}
	}
	
	.pay-mask {
		padding: 20px;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #5aaeb0;
		line-height: 20px;
	}
	
</style>
